<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>列表组--带链接的列表组</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<h3>带链接的列表组1</h3>
<!--
带链接的列表组，其实就是每个列表项都具有链接效果。大家可能最初想到的就是在基础列表组的基础上，给列表项的文本添加链接：
这样做有一个不足之处，就是链接的点击区域只在文本上有效：
-->
<ul class="list-group">
    <li class="list-group-item">
		<a href="##">揭开CSS3的面</a>
	</li>
	<li class="list-group-item">
		<a href="##">CSS3选择器</a>
	</li>
	<li class="list-group-item">
		<a href="##">CSS3边框</a>
	</li>
	<li class="list-group-item">
		<a href="##">CSS3背景</a>
	</li>
	<li class="list-group-item">
		<a href="##">CSS3文本</a>
	</li>
</ul>
<h3>带链接的列表组2</h3>
<!--
在Bootstrap框架中，采用了另一种实现方式。就是将ul.list-group使用div.list-group来替换，而li.list-group-item直接用a.list-group-item来替换。

这样就可以达到需要的效果：

<div class="list-group">
    <a href="##" class="list-group-item">图解CSS3</a>
    <a href="##" class="list-group-item"><span class="badge">220</span>Sass教程</a>
    <a href="##" class="list-group-item">玩转Bootstrap</a>
</div>
-->
<div class="list-group">
	<a href="##" class="list-group-item">图解CSS3</a>
	<a href="##" class="list-group-item"><span class="badge">220</span>Sass教程</a>
	<a href="##" class="list-group-item">玩转Bootstrap</a>
</div>

<br/>
<br/>
<!--下面是代码任务部分-->
<h2>代码任务部分</h2>






  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>
</html>